<template>
  <div class="header">
    <!-- 第一部分导航栏 -->
    <div class="navigation1">
      <img src="../assets/circle.jpg" />
      <template>
        <div class="navigation1_public">
          <span class="gz">关注</span>
          <span class="fx" style="color: black">发现</span>
          <span class="sz">深圳</span>
        </div>
      </template>
    </div>

    <!-- 搜索框 -->
    <div class="search">🔍大家都在搜“妆容画廊”</div>

    <hr style="color: #f0f0f0;" />
    <!-- 第二部分导航栏 -->
    <div class="navigation2">
      <span style="margin-left: 0">搞笑</span>
      <span>游戏</span>
      <span>穿搭</span>
      <span style="color: black">vlog</span>
      <span>科技数码</span>
      <span>运动健身</span>
    </div>
  </div>
</template>

<script>
export default {};
</script>

<style lang="less" scoped>
.header{
  width: 100%;
  position: fixed;
  top: 0;
  background: white;
  z-index: 9999;
}
.navigation1 {
  height: 40px;
  position: relative;
  border-top: white 10px solid;
  span {
    display: inline-block;
    margin: 0 15px;
    color: #9f9f9f;
  }
  img {
    width: 20px;
    height: 20px;
    position: absolute;
    left: 10px;
    top: 10px;
  }
  // 第一部分导航栏共有样式
  .navigation1_public {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    .fx {
      border-bottom: 1px #e52f4e solid;
    }
  }
}

.search {
  width: 95%;
  border: 1px #9b9b9b solid;
  border-radius: 30px;
  background-color: #f6f6f6;
  color: #ababab;
  height: 30px;
  line-height: 30px;
  margin-top: 10px;
  font-size: 14px;
}

.navigation2 {
  height: 30px;
  span {
    display: inline-block;
    margin: 0 15px;
    color: #9f9f9f;
  }
}
</style>